<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文书-日常管理-人员信息管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; padding: 16px; }
        
        .container { background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 1600px; margin: 32px auto; }
        .page-title { font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 24px; }
        
        /* 筛选区域 */
        .filter-section { background: #fafafa; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
        .filter-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
        .filter-left { display: flex; gap: 16px; align-items: end; }
        .form-group { margin-bottom: 0; }
        .form-label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; }
        .form-input, .form-select { width: 200px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; }
        
        /* 按钮样式 */
        .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #1890ff; color: white; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-reset { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
        .btn-reset:hover { background: #e6f7ff; }
        .btn-success { background: #52c41a; color: white; }
        .btn-success:hover { background: #73d13d; }
        .btn-danger { background: #ff4d4f; color: white; }
        .btn-danger:hover { background: #ff7875; }
        .btn-group { display: flex; gap: 8px; }
        
        /* 表格样式 */
        .table-container { overflow-x: auto; margin-bottom: 16px; }
        table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8e8e8; border-radius: 4px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
        th { background: #fafafa; font-weight: 500; color: #666; white-space: nowrap; }
        td { background: white; }
        tr:last-child td { border-bottom: none; }
        
        /* 分页样式 */
        .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
        .page-item { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .page-item.active { background: #1890ff; color: white; border-color: #1890ff; }
        .page-item:hover:not(.active) { background: #f5f5f5; }
        
        /* 弹窗样式 */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 5% auto; padding: 0; border: none; border-radius: 8px; width: 600px; max-height: 90vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e8e8e8; }
        .modal-title { font-size: 18px; font-weight: 500; color: #333; }
        .close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover { color: #000; }
        .modal-body { padding: 24px; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* 表单样式 */
        .modal-form { display: flex; flex-direction: column; gap: 16px; }
        .modal-form-group { display: flex; flex-direction: column; gap: 8px; }
        .modal-form-label { font-size: 14px; color: #666; font-weight: 500; }
        .modal-form-input, .modal-form-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .modal-form-input:focus, .modal-form-select:focus { outline: none; border-color: #1890ff; }
        .date-range { display: flex; gap: 8px; align-items: center; }
        .date-range input { width: 180px; }
        
        /* 文件上传样式 */
        .upload-area { border: 2px dashed #d9d9d9; border-radius: 4px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.3s; }
        .upload-area:hover { border-color: #1890ff; }
        .upload-text { color: #666; font-size: 14px; }
        .upload-icon { font-size: 24px; color: #d9d9d9; margin-bottom: 8px; }
        .file-input { display: none; }
        .uploaded-file { margin-top: 8px; font-size: 12px; color: #52c41a; }
        
        /* 性别标签 */
        .gender-male { color: #1890ff; }
        .gender-female { color: #ff4d4f; }
        
        /* 操作按钮 */
        .action-btn { padding: 4px 8px; margin: 0 2px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">人员信息管理</h1>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <form class="filter-form" id="filterForm" onsubmit="event.preventDefault(); applyFilters();">
                <div class="filter-left">
                    <div class="form-group">
                        <label class="form-label">姓名</label>
                        <input class="form-input" id="filterName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label class="form-label">执业证号</label>
                        <input class="form-input" id="filterLicenseNo" placeholder="请输入执业证号">
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" type="submit">查询</button>
                    <button class="btn btn-reset" type="button" onclick="resetFilters()">重置</button>
                    <button class="btn btn-success" type="button" onclick="openAddModal()">新增</button>
                </div>
            </form>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>执业证号</th>
                        <th>首次获批时间</th>
                        <th>职业领域</th>
                        <th>执业证有效期</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="dataTbody"></tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" id="pagination"></div>
    </div>

    <!-- 新增人员弹窗 -->
    <div id="addPersonModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="personModalTitle">新增人员</span>
                <span class="close" onclick="closeAddModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="addPersonForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">人员姓名 <span style="color: red;">*</span></label>
                        <select class="modal-form-select" id="personName" required>
                            <option value="">请选择人员</option>
                            <option value="张三">张三</option>
                            <option value="李四">李四</option>
                            <option value="王五">王五</option>
                            <option value="赵六">赵六</option>
                            <option value="钱七">钱七</option>
                            <option value="孙八">孙八</option>
                            <option value="周九">周九</option>
                            <option value="吴十">吴十</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">性别 <span style="color: red;">*</span></label>
                        <select class="modal-form-select" id="gender" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">执业证号 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="licenseNo" placeholder="请输入执业证号" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">首次获批时间 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="firstApprovalDate" type="date" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">职业领域 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="professionalField" placeholder="请输入职业领域" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">执业证有效期 <span style="color: red;">*</span></label>
                        <div class="date-range">
                            <input class="modal-form-input" id="validityStartDate" type="date" required>
                            <span>至</span>
                            <input class="modal-form-input" id="validityEndDate" type="date" required>
                        </div>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">证书上传</label>
                        <div class="upload-area" onclick="document.getElementById('certificateFile').click()">
                            <div class="upload-icon">📁</div>
                            <div class="upload-text">点击上传证书图片</div>
                            <div class="uploaded-file" id="uploadedFileName" style="display: none;"></div>
                        </div>
                        <input type="file" id="certificateFile" class="file-input" accept="image/*" onchange="handleFileUpload(this)">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-reset" onclick="closeAddModal()">取消</button>
                <button class="btn btn-primary" onclick="submitPerson()">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockData = [
            {
                id: 1, name: '张医生', gender: '男', licenseNo: 'YS202301001', 
                firstApprovalDate: '2023-01-15', professionalField: '法医临床', 
                validityPeriod: '2023-01-15至2028-01-14', createTime: '2023-01-15 09:30:00'
            },
            {
                id: 2, name: '李专家', gender: '女', licenseNo: 'YS202301002', 
                firstApprovalDate: '2023-02-20', professionalField: '法医病理', 
                validityPeriod: '2023-02-20至2028-02-19', createTime: '2023-02-20 14:20:00'
            },
            {
                id: 3, name: '王主任', gender: '男', licenseNo: 'YS202301003', 
                firstApprovalDate: '2023-03-10', professionalField: '法医毒物', 
                validityPeriod: '2023-03-10至2028-03-09', createTime: '2023-03-10 11:15:00'
            },
            {
                id: 4, name: '赵教授', gender: '女', licenseNo: 'YS202301004', 
                firstApprovalDate: '2023-04-05', professionalField: '法医精神病', 
                validityPeriod: '2023-04-05至2028-04-04', createTime: '2023-04-05 16:45:00'
            },
            {
                id: 5, name: '钱鉴定师', gender: '男', licenseNo: 'YS202301005', 
                firstApprovalDate: '2023-05-12', professionalField: '法医物证', 
                validityPeriod: '2023-05-12至2028-05-11', createTime: '2023-05-12 10:20:00'
            }
        ];

        let filteredData = [...mockData];
        let currentPage = 1;
        const pageSize = 5;
        let isEditMode = false;
        let currentEditId = null;

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('dataTbody');
            tbody.innerHTML = '';
            
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageData = filteredData.slice(start, end);

            pageData.forEach((item, index) => {
                const genderClass = item.gender === '男' ? 'gender-male' : 'gender-female';
                tbody.innerHTML += `
                    <tr>
                        <td>${start + index + 1}</td>
                        <td>${item.name}</td>
                        <td class="${genderClass}">${item.gender}</td>
                        <td>${item.licenseNo}</td>
                        <td>${item.firstApprovalDate}</td>
                        <td>${item.professionalField}</td>
                        <td>${item.validityPeriod}</td>
                        <td>${item.createTime}</td>
                        <td>
                            <button class="btn btn-primary action-btn" onclick="editPerson(${item.id})">编辑</button>
                            <button class="btn btn-reset action-btn" onclick="viewDetails(${item.id})">详情</button>
                            <button class="btn btn-danger action-btn" onclick="deletePerson(${item.id})">删除</button>
                        </td>
                    </tr>
                `;
            });
        }

        // 渲染分页
        function renderPagination() {
            const total = filteredData.length;
            const pageCount = Math.ceil(total / pageSize);
            const container = document.getElementById('pagination');
            container.innerHTML = '';
            
            if (pageCount <= 1) return;

            // 上一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.max(1, currentPage - 1)})" ${currentPage === 1 ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>上一页</span>`;
            
            // 页码
            for (let i = 1; i <= pageCount; i++) {
                container.innerHTML += `<span class="page-item ${i === currentPage ? 'active' : ''}" onclick="gotoPage(${i})">${i}</span>`;
            }
            
            // 下一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.min(pageCount, currentPage + 1)})" ${currentPage === pageCount ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>下一页</span>`;
        }

        // 跳转页面
        function gotoPage(page) {
            const pageCount = Math.ceil(filteredData.length / pageSize);
            if (page < 1 || page > pageCount) return;
            currentPage = page;
            renderTable();
            renderPagination();
        }

        // 应用筛选
        function applyFilters() {
            const name = document.getElementById('filterName').value.trim();
            const licenseNo = document.getElementById('filterLicenseNo').value.trim();
            
            filteredData = mockData.filter(item => 
                (!name || item.name.includes(name)) &&
                (!licenseNo || item.licenseNo.includes(licenseNo))
            );
            
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 重置筛选
        function resetFilters() {
            document.getElementById('filterForm').reset();
            filteredData = [...mockData];
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 打开新增弹窗
        function openAddModal() {
            isEditMode = false;
            currentEditId = null;
            document.getElementById('personModalTitle').textContent = '新增人员';
            document.getElementById('addPersonModal').style.display = 'block';
        }

        // 编辑人员
        function editPerson(id) {
            const person = mockData.find(item => item.id === id);
            if (person) {
                isEditMode = true;
                currentEditId = id;
                document.getElementById('personModalTitle').textContent = '编辑人员';
                
                // 填充表单数据
                document.getElementById('personName').value = person.name;
                document.getElementById('gender').value = person.gender;
                document.getElementById('licenseNo').value = person.licenseNo;
                document.getElementById('firstApprovalDate').value = person.firstApprovalDate;
                document.getElementById('professionalField').value = person.professionalField;
                
                // 解析有效期
                const [startDate, endDate] = person.validityPeriod.split('至');
                document.getElementById('validityStartDate').value = startDate;
                document.getElementById('validityEndDate').value = endDate;
                
                document.getElementById('addPersonModal').style.display = 'block';
            }
        }

        // 关闭新增弹窗
        function closeAddModal() {
            isEditMode = false;
            currentEditId = null;
            document.getElementById('addPersonModal').style.display = 'none';
            document.getElementById('addPersonForm').reset();
            document.getElementById('uploadedFileName').style.display = 'none';
        }

        // 处理文件上传
        function handleFileUpload(input) {
            const file = input.files[0];
            if (file) {
                const fileName = file.name;
                const uploadedFileDiv = document.getElementById('uploadedFileName');
                uploadedFileDiv.textContent = `已选择: ${fileName}`;
                uploadedFileDiv.style.display = 'block';
            }
        }

        // 提交新增人员
        function submitPerson() {
            const form = document.getElementById('addPersonForm');
            if (!form.checkValidity()) {
                alert('请填写所有必填项');
                return;
            }

            const name = document.getElementById('personName').value;
            const gender = document.getElementById('gender').value;
            const licenseNo = document.getElementById('licenseNo').value;
            const firstApprovalDate = document.getElementById('firstApprovalDate').value;
            const professionalField = document.getElementById('professionalField').value;
            const validityStartDate = document.getElementById('validityStartDate').value;
            const validityEndDate = document.getElementById('validityEndDate').value;

            // 验证有效期
            if (new Date(validityStartDate) >= new Date(validityEndDate)) {
                alert('有效期开始日期必须早于结束日期');
                return;
            }

            if (isEditMode) {
                // 编辑模式 - 检查执业证号是否与其他人员重复（排除当前编辑的人员）
                if (mockData.some(item => item.licenseNo === licenseNo && item.id !== currentEditId)) {
                    alert('执业证号已存在');
                    return;
                }

                // 更新现有人员信息
                const person = mockData.find(item => item.id === currentEditId);
                if (person) {
                    person.name = name;
                    person.gender = gender;
                    person.licenseNo = licenseNo;
                    person.firstApprovalDate = firstApprovalDate;
                    person.professionalField = professionalField;
                    person.validityPeriod = `${validityStartDate}至${validityEndDate}`;
                }
                alert('人员信息修改成功');
            } else {
                // 新增模式 - 检查执业证号是否已存在
                if (mockData.some(item => item.licenseNo === licenseNo)) {
                    alert('执业证号已存在');
                    return;
                }

                const newPerson = {
                    id: mockData.length + 1,
                    name: name,
                    gender: gender,
                    licenseNo: licenseNo,
                    firstApprovalDate: firstApprovalDate,
                    professionalField: professionalField,
                    validityPeriod: `${validityStartDate}至${validityEndDate}`,
                    createTime: new Date().toLocaleString('zh-CN')
                };

                mockData.push(newPerson);
                alert('人员添加成功');
            }

            closeAddModal();
            applyFilters();
        }

        // 查看详情
        function viewDetails(id) {
            const person = mockData.find(item => item.id === id);
            if (person) {
                alert(`人员详情：\n姓名：${person.name}\n性别：${person.gender}\n执业证号：${person.licenseNo}\n首次获批时间：${person.firstApprovalDate}\n职业领域：${person.professionalField}\n执业证有效期：${person.validityPeriod}`);
            }
        }

        // 删除人员
        function deletePerson(id) {
            if (confirm('确定要删除此人员吗？')) {
                const index = mockData.findIndex(item => item.id === id);
                if (index !== -1) {
                    mockData.splice(index, 1);
                    alert('删除成功');
                    applyFilters();
                }
            }
        }

        // 点击弹窗外部关闭
        document.addEventListener('click', function(e) {
            if (e.target === document.getElementById('addPersonModal')) {
                closeAddModal();
            }
        });

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderTable();
            renderPagination();
        });
    </script>
</body>
</html>